<template>
  <div>
    <div v-if="isSearch">
      <el-form-item>
        <el-select :value="largeCate" placeholder="请选择大类" @change="handleLargeChange" clearable>
          <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select :value="midCate" placeholder="请选择中类" @change="handleMidChange" clearable>
          <el-option
              v-for="item in midOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select :value="minCate" placeholder="请选择小类" @change="handleMinChange" clearable>
          <el-option
              v-for="item in minOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div v-else>
      <el-cascader :options="categoryOptions" :value="categoryValue" @change="handleChange"></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryCascader",
  props: ['value', 'isSearch'],
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      categoryOptions: [{
        label: '丝绸工业相关设施',
        value: '丝绸工业相关设施',
        children: [{
          label: '仓储设施',
          value: '仓储设施',
          children: [{
            label: '茧库',
            value: '茧库'
          }, {
            label: '丝库',
            value: '丝库'
          }, {
            label: '丝绸综合库',
            value: '丝绸综合库'
          }]
        }, {
          label: '公共设施',
          value: '公共设施',
          children: [{
            label: '展览',
            value: '展览'
          }]
        }, {
          label: '行业组织机构设施',
          value: '行业组织机构设施',
          children: [{
            label: '丝绸行业会馆',
            value: '丝绸行业会馆'
          }]
        }]
      }, {
        label: '丝绸工业生产设施',
        value: '丝绸工业生产设施',
        children: [{
          label: '蚕丝生产设施',
          value: '蚕丝生产设施',
          children: [{
            label: '茧站',
            value: '茧站'
          }, {
            label: '制丝厂生产设施',
            value: '制丝厂生产设施'
          }]
        }, {
          label: '其他生产配套设施',
          value: '其他生产配套设施',
          children: [{
            label: '蚕茧库、烟囱',
            value: '蚕茧库、烟囱'
          }, {
            label: '烟囱',
            value: '烟囱'
          }]
        }, {
          label: '桑蚕种养设施',
          value: '桑蚕种养设施',
          children: [{
            value: '',
            label: '蚕房'
          }, {
            label: '蚕房、蚕种场其他相关设施',
            value: '蚕房、蚕种场其他相关设施'
          }, {
            label: '蚕种场',
            value: '蚕种场'
          }]
        }, {
          label: '丝绸成品加工设施',
          value: '丝绸成品加工设施',
          children: [{
            label: '丝绸服饰加工',
            value: '丝绸服饰加工'
          }]
        }, {
          label: '丝绸织造染整设施',
          value: '丝绸织造染整设施',
          children: [{
            label: '丝织生产设施、丝绸工艺品加工',
            value: '丝织生产设施、丝绸工艺品加工'
          }, {
            label: '丝织生产设施、染整生产设施',
            value: '丝织生产设施、染整生产设施'
          }]
        }, {
          label: '丝绸综合生产设施',
          value: '丝绸综合生产设施',
          children: [{
            label: '综合型丝绸生产厂',
            value: '综合型丝绸生产厂'
          }, {
            label: '丝绸综合生产设施',
            value: '丝绸综合生产设施'
          }]
        }]
      }],
      midOptions: this.defaultMidOptions,
      minOptions: this.defaultMinOptions
    }
  },
  mounted() {
    console.log(this.defaultMidOptions)
  },
  methods: {
    handleLargeChange(value) {
      this.$emit('change', {
        large: value,
        mid: null,
        min: null
      })
    },
    handleMidChange(value) {
      console.log("largeCate => " + this.largeCate)
      this.$emit('change', {
        large: this.largeCate,
        mid: value,
        min: null
      })
    },
    handleMinChange(value) {
      console.log(value)
      this.$emit('change', {
        large: this.largeCate,
        mid: this.midCate,
        min: value
      })
    },
    handleChange(value) {
      this.$emit('change', {
        large: value[0],
        mid: value[1],
        min: value[2]
      })
    }
  },
  watch: {
    largeCate: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log("new: %s, old: %s", newVal, oldVal)
        // clear 之后, 或初始化
        if (newVal === "" || newVal === null && oldVal === undefined) {
          this.midOptions = this.defaultMidOptions
          this.minOptions = this.defaultMinOptions
          //
        } else {
          if (newVal !== oldVal) {
            this.midOptions = this.categoryOptions.filter(largeCate => {
              if (largeCate.value === newVal) {
                return true
              }
            })[0].children
            if (!this.midCate) {
              let list = []
              this.midOptions.map(midCate => {
                for (let i in [...midCate.children]) {
                  list.push([...midCate.children][i])
                }
              })
              this.minOptions = Object.assign([], list)
            }
          }
        }
      }
    },
    midCate: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log("new: %s, old: %s", newVal, oldVal)
        if (newVal === "" && this.largeCate) {
          let list = []
          this.midOptions.map(midCate => {
            for (let i in [...midCate.children]) {
              list.push([...midCate.children][i])
            }
          })
          this.minOptions = Object.assign([], list)
        } else {
          if (newVal === "") {
            this.minOptions = this.defaultMinOptions
          } else {
            if (newVal !== oldVal) {
              if (!this.largeCate) {
                console.log("ok1")
                for (let j in this.categoryOptions) {
                  if (this.categoryOptions.hasOwnProperty(j)) {
                    for (let k in this.categoryOptions[j].children) {
                      if (this.categoryOptions[j].children.hasOwnProperty(k)) {
                        if (newVal === this.categoryOptions[j].children[k].value) {
                          this.value.large = this.categoryOptions[j].value
                        }
                      }
                    }
                  }
                }
              }
              // setTimeout x
              setTimeout(() => {
                this.minOptions = this.midOptions.filter(midCate => {
                  if (midCate.value === newVal) {
                    return true
                  }
                })[0].children
                console.log("ok2")
              }, 500)
            }
          }
        }
      }
    },
    minCate(value) {
      console.log("ok")
      if (!this.midCate || !this.largeCate) {
        for (let j in this.categoryOptions) {  // 遍历大类
          if (this.categoryOptions.hasOwnProperty(j)) {
            for (let k in this.categoryOptions[j].children) {  // 遍历中类
              if (this.categoryOptions[j].children.hasOwnProperty(k)) {
                // if (this.categoryOptions[j].children[k].children !== undefined)
                for (let m in this.categoryOptions[j].children[k].children) {  // 遍历小类
                  if (this.categoryOptions[j].children[k].children.hasOwnProperty(m)) {
                    if (value === this.categoryOptions[j].children[k].children[m].value) {
                      if (!this.midCate) {
                        this.value.mid = this.categoryOptions[j].children[k].value
                      }
                      if (!this.largeCate) {
                        this.value.large = this.categoryOptions[j].value
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    largeCate() {
      if (this.value != null) {
        return this.value.large
      }
    },
    midCate() {
      if (this.value != null) {
        return this.value.mid
      }
    },
    minCate() {
      if (this.value != null) {
        return this.value.min
      }
    },
    categoryValue() {
      if (this.value != null) {
        return [this.value.large, this.value.mid, this.value.min]
      }
    },
    defaultMidOptions() {
      let list = []
      for (let j in this.categoryOptions) {
        if (this.categoryOptions.hasOwnProperty(j)) {
          for (let k in this.categoryOptions[j].children) {
            if (this.categoryOptions[j].children.hasOwnProperty(k)) {
              list.push({
                label: this.categoryOptions[j].children[k].label,
                value: this.categoryOptions[j].children[k].value
              })
            }
          }
        }
      }
      return list
    },
    defaultMinOptions() {
      let list = []
      for (let j in this.categoryOptions) {
        if (this.categoryOptions.hasOwnProperty(j)) {
          for (let k in this.categoryOptions[j].children) {
            if (this.categoryOptions[j].children.hasOwnProperty(k)) {
              // if (this.categoryOptions[j].children[k].children !== undefined)
              for (let m in this.categoryOptions[j].children[k].children) {
                if (this.categoryOptions[j].children[k].children.hasOwnProperty(m)) {
                  list.push({
                    label: this.categoryOptions[j].children[k].children[m].label,
                    value: this.categoryOptions[j].children[k].children[m].value
                  })
                }
              }
            }
          }
        }
      }
      return list
    }
  }
}
</script>

<style scoped>

</style>
